<template>
  <div style="width: 100%">
    <template>
      <div v-if="mode === 'edit'">
        <!-- contenteditable="true" -->
        <div
          style="display: flex; align-items: center"
          v-for="item in dataList"
          :key="item.url"
          :style="{
            background: titlesBgColor,
            borderRadius: titlesRadius + 'px',
            paddingTop: titlesPaddingTop + 'px',
            paddingLeft: titlesPaddingLeft + 'px',
            paddingRight: titlesPaddingRight + 'px',
            paddingBottom: titlesPaddingBottom + 'px',
            marginTop: titlesMarginTop + 'px',
            marginLeft: titlesMarginLeft + 'px',
            marginRight: titlesMarginRight + 'px',
            marginBottom: titlesMarginBottom + 'px',
          }"
          :class="isColumn ? 'flex' : ''"
        >
          <img
            :src="item.url"
            alt=""
            :style="{
              width: titlesIcon + 'px',
              height: titlesIcon + 'px',
            }"
            v-if="showIcon"
          />
          <div
              :style="{ width: iconText + 'px', height: iconText + 'px' }"
            ></div>
          <div style="width: 100%">
            <div
              :style="{
                color: titlesColor,
                fontSize: titlesSize + 'px',
                textAlign: titlesAlign,
              }"
              :class="[
                titlesWeight ? 'weight' : '',
                isColumn ? 'column' : 'row',
              ]"
              style="line-height: 15px"
            >
              {{ item.title }}
            </div>
          </div>
          <!-- <p>{{ content }}</p> -->
        </div>
      </div>
      <div v-else>
        {{ value }}
      </div>
    </template>
  </div>
</template>
<script>
import datasource from "../../mixins/steps-datasource";
export default {
  name: "iconTitles",
  mixins: [datasource],
  props: {
    value: {
      type: String | Number | Object | Array,
    },
    mode: {
      // 编辑态: edit, 查看态:view , 用于在子表格内切换状态
      default: "edit",
    },
    entityModel: {
      // 如果组件绑定了一个实体, 则该属性会传入实体的数据
      default: () => {},
    },
    readonly: {
      default: false,
    },
    disabled: {
      default: false,
    },
    iconTitles: {
      default: "标题名称",
    },
    titlesColor: {
      default: "",
    },
    titlesSize: {
      default: "",
    },
    titlesWeight: {
      default: false,
    },
    iconImg: {
      dafault: "",
    },
    titlesAlign: {
      default: "",
    },
    iconImg: {
      dafault: "",
    },
    showIcon: {
      default: false,
    },
    titlesList: {
      type: Array,
    },
    titlesBgColor: {
      default: "",
    },
    titlesRadius: {
      default: "",
    },
    titlesIcon: {
      default: "30",
    },
    titlesMarginLeft: {
      default: "",
    },
    titlesMarginTop: {
      default: "",
    },
    titlesMarginBottom: {
      default: "",
    },
    titlesMarginRight: {
      default: "",
    },
    titlesPaddingLeft: {
      default: "",
    },
    titlesPaddingTop: {
      default: "",
    },
    titlesPaddingBottom: {
      default: "",
    },
    titlesPaddingRight: {
      default: "",
    },
    isColumn: {
      default: false,
    },
    iconText: {
      default: "15",
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  computed: {},
  methods: {},
  mounted() {},
  watch: {
    titlesList: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log(val,'====val')
        if (val && val.length) {
          this.dataList = val
        }
      },
    },
  },
};
</script>
<style scoped>
.flex {
  flex-direction: column;
}
.weight {
  font-weight: bold;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.column {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
